<template>
  <hips-view sub-header-fixed>
    <hips-nav-bar
      slot="header"
      title="Textarea 文本域"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />

    <hips-tabs
      slot="sub-header"
      v-model="active"
    >
      <hips-tab title="标准用法" />
      <hips-tab title="Dsx用法" />
    </hips-tabs>

    <div v-show="!active">
      <demo-block title="基础用法">
        <hips-textarea
          v-model="inputs.input0"
          placeholder="请输入姓名"
          @on-blur="handleOnBlur"
          @on-focus="handleOnFocus"
        />        
      </demo-block>
      <demo-block title="带标签">
        <hips-textarea
          v-model="inputs.input1"
          label="姓名"
          placeholder="请输入姓名"
          label-icon="mine-o"
          label-position="left"
        />
      </demo-block>
      <demo-block title="自动计算高度">
        <hips-textarea
          v-model="inputs.input7"
          label="姓名"
          placeholder="请输入姓名"
          auto-height
          label-position="left"
        />
      </demo-block>
      <demo-block title="在分组中使用">
        <hips-group>
          <hips-textarea
            v-model="inputs.input2"
            label="姓名"
            placeholder="请输入姓名"
            label-position="left"
          />
          <hips-textarea
            v-model="inputs.input3"
            label="账号"
            placeholder="请输入账号"
            auto-height
            label-position="left"
          />
        </hips-group>
      </demo-block>
      <demo-block title="禁用">
        <hips-textarea
          v-model="inputs.input4"
          label="姓名"
          placeholder="请输入姓名"
          disabled
          label-position="left"
        />
      </demo-block>
      <demo-block title="必填">
        <hips-textarea
          v-model="inputs.input5"
          label="姓名"
          placeholder="请输入姓名"
          required
          label-position="left"
          show-error-message
        />
      </demo-block>
      <demo-block title="标题在顶部">
        <hips-textarea
          v-model="inputs.input6"
          label="姓名"
          placeholder="请输入姓名"
          label-position="top"
        />
      </demo-block>
      <demo-block title="限制输入长度">
        <hips-textarea
          v-model="inputs.input8"
          label="姓名"
          placeholder="请输入姓名"
          :max-length="10"
          :show-count="true"
          required
          label-position="left"
          show-error-message
        />
      </demo-block>
    </div>
    <div v-show="active">
      <demo-block title="基础用法">
        <hips-textarea :d-field="dsx.records.at(0).getField('input0')" />        
      </demo-block>
      <demo-block title="带标签">
        <hips-textarea :d-field="dsx.records.at(0).getField('input1')" />
      </demo-block>
      <demo-block title="自动计算高度">
        <hips-textarea :d-field="dsx.records.at(0).getField('input7')" />
      </demo-block>
      <demo-block title="在分组中使用">
        <hips-group>
          <hips-textarea :d-field="dsx.records.at(0).getField('input2')" />
          <hips-textarea :d-field="dsx.records.at(0).getField('input3')" />
        </hips-group>
      </demo-block>
      <demo-block title="禁用">
        <hips-textarea :d-field="dsx.records.at(0).getField('input4')" />
      </demo-block>
      <demo-block title="必填">
        <hips-textarea :d-field="dsx.records.at(0).getField('input5')" />
      </demo-block>
      <demo-block title="标题在顶部">
        <hips-textarea :d-field="dsx.records.at(0).getField('input6')" />
      </demo-block>
      <demo-block title="限制输入长度">
        <hips-textarea :d-field="dsx.records.at(0).getField('input8')" />
      </demo-block>
    </div>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';

import { Textarea, Group, Tabs, Tab } from '@hips/vue-ui';

import Dsx from '@hips/plugin-dataset-vuex';

export default {
  components: {
    [Textarea.name]: Textarea,
    [Group.name]: Group,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
  },
  mixins: [ BasicView ],
  data() {
    const _this = this;
    return {
      active: 0,
      inputs: {
        input0: '11',
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        input5: '',
        input6: '',
        input7: '',
        input8: '',
      },
      dsx: new Dsx({
        moduleName: 'dsx-textarea',
        autoCreate: true,
        fields: [
          {
            name: 'input0',
            placeholder: '请输入姓名',
            defaultValue: '11',
            emits: {
              blur() {
                _this.handleOnBlur();
              },
              focus() {
                _this.handleOnFocus();
              },
            },
          },
          {
            name: 'input1',
            label: '姓名',
            placeholder: '请输入姓名',
            labelIcon: 'mine-o',
            labelPosition: 'left',
          },
          {
            name: 'input7',
            label: '姓名',
            placeholder: '请输入姓名',
            autoHeight: true,
            labelPosition: 'left',
          },
          {
            name: 'input2',
            label: '姓名',
            placeholder: '请输入姓名',
            labelPosition: 'left',
          },
          {
            name: 'input3',
            label: '账号',
            placeholder: '请输入账号',
            autoHeight: true,
            labelPosition: 'left',
          },
          {
            name: 'input4',
            label: '姓名',
            placeholder: '请输入姓名',
            disabled: true,
            labelPosition: 'left',
          },
          {
            name: 'input5',
            label: '姓名',
            placeholder: '请输入姓名',
            required: true,
            labelPosition: 'left',
            showErrorMessage: true,
            validateOn: 'blur',
            validationMessages: {
              required: '此项目必填',
            },
          },
          {
            name: 'input6',
            label: '姓名',
            placeholder: '请输入姓名',
            labelPosition: 'top',
          },
          {
            name: 'input8',
            label: '姓名',
            placeholder: '请输入姓名',
            maxLength: 10,
            showCount: true,
            required: true,
            labelPosition: 'left',
            validateOn: 'change',
            showErrorMessage: true,
            validationMessages: {
              required: '此项目必填',
              maxLength: '内容超过了10',
            },
          },
        ],
      }),
    };
  },
  methods: {
    handleOnBlur() {
      this.$hips.toast('handleOnBlur');
    },

    handleOnFocus() {
      this.$hips.toast('handleOnFocus');
    },
  },
};
</script>

<style>
.button {
  width: 64px;
  height: 28px;
  margin-top: 6px;
  margin-bottom: 6px;
  line-height: 28px;
  text-align: center;
  background-color: green;
  color: white;
  font-size: 14px;
  border-radius: 5px;
}
</style>
